<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap.min.css">
    <style>
        html,
        body {
            height: 100%;
        }
        
        #template {
            display: none;
        }
        
        #mask {
            position: fixed;
            background-color: rgba(0, 0, 0, .5);
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            display: none;
        }
        
        #popup p {
            line-height: 42px;
        }
        
        #popup {
            width: 550px;
            padding: 30px;
            background-color: #fff;
            border-radius: 20px;
            position: fixed;
            top: 50%;
            z-index: 1;
            left: 50%;
            transform: translate(-50%, -50%);
            display: none;
        }
        
        .nav li {
            float: left;
            list-style: none;
        }
    </style>
</head>

<body>
    <div style="height: 60px;">
        <h2 style="float:left;margin-top: 15px;margin-left: 15px;">欢迎 <span style="color: brown;font-size: 25px;" id="nicheng">aaa</span> 登录</h2>
        <a href="http://10.35.165.16" style="margin-left: 15px;margin-top: 27px;float: left;" id="tuichu">退出登录</a>
        <button class="btn btn-primary" id="popupshow" style="float:right;margin-top: 15px;margin-right: 15px;">+添加学生</button>
    </div>
    <ul class="nav">

        <li><a href="/xue.html">学生管理</a></li>
        <li><a href="/score.html">成绩管理</a></li>
    </ul>
    <table class="table">
        <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>所在城市</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody class="tbody1">
            <tr id="template">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>
                    <button class="btn btn-danger shanchuxueyuan">删除学员</button>
                    <button class="btn btn-primary xiugaixinxi">修改信息</button>
                </td>
            </tr>
        </tbody>
    </table>



    <div id="popup">
        <div class="form-group">
            <label for="newName">姓名</label>
            <input type="text" class="form-control" id="newName" placeholder="请输入学生姓名">
        </div>
        <div class="form-group">
            <label for="newAge">年龄</label>
            <input type="number" class="form-control" id="newAge" placeholder="请输入学生年龄">
        </div>
        <div class="form-group">
            <label for="newCity">所在城市</label>
            <select name="" id="province"></select>
            <select name="" id="city"></select>
            <select name="" id="area"></select>
        </div>
        <div class="form-group">
            <label class="radio-inline">
            <input type="radio" name="sex" id="boy" value="option1"> 男
            </label>
            <label class="radio-inline">
            <input type="radio" name="sex" id="girl" value="option2" checked> 女
            </label>
        </div>
        <button type="submit" class="btn btn-primary" id="send">确认添加</button>
        <button type="submit" class="btn btn-warning" id="gai">确认修改</button>
        <button type="submit" class="btn btn-danger" id="xiao" style="margin-left: 100px;">取消操作</button>
    </div>
    <div id="mask">
    </div>
</body>
<script src="citys.js"></script>
<script src="jquery.min.js"></script>
<script>
    let denglule = sessionStorage.getItem("denglule");
    let yonghu = localStorage.getItem("yonghu");
    if (!denglule) {
        window.location.href = url
    } else {
        $("#nicheng").html(yonghu + "：" + denglule)
    }
    $("#tuichu").click(function() {
        sessionStorage.clear()
    })
    $.ajax({
        dataType: "jsonp",
        url: `${url}/getData`,
        success(data) {
            data.forEach(item => {
                let a = $("#template").clone(true)
                a.attr("id", "")
                a.find("td").eq(0).html(item.id)
                a.find("td").eq(1).html(item.name)
                a.find("td").eq(2).html(item.sex ? "女" : "男")
                a.find("td").eq(3).html(item.age)
                a.find("td").eq(4).html(item.city)
                a.appendTo($(".tbody1"))
            })
        }
    })
    $(".shanchuxueyuan").click(function() {
        if (confirm("真要删吗？")) {
            $.ajax({
                // dataType: "jsonp",
                url: `${url}/shanData`,
                data: {
                    id: $(this).closest("tr").find("td").eq(0).html()
                },
                success(data) {
                    if (data === "成功") {
                        history.go(0)
                    }
                }
            })
        }

    })
    $("#popupshow").click(function() {
        $("#popup").fadeIn()
        $("#mask").fadeIn()
        $("#gai").hide()
    })
    $("#xiao").click(function() {
        $("#popup").fadeOut()
        $("#mask").fadeOut()
    })
    $("#send").click(function() {
        $("#popup").fadeOut()
        $("#mask").fadeOut()
        $.ajax({
            url: `${url}/addData`,
            data: {
                name: $("#newName").val(),
                age: $("#newAge").val(),
                city: $("#province").val() + $("#city").val() + $("#area").val(),
                sex: $("#boy")[0].checked ? 0 : 1
            },
            success(data) {
                if (data === "成功") {
                    history.go(0)
                }
            }
        })

    })
    $(".xiugaixinxi").click(function() {
        $("#popup").fadeIn()
        $("#mask").fadeIn()
        $("#send").hide()
        $("#newName").val($(this).closest("tr").find("td").eq(1).html())
        $("#newAge").val($(this).closest("tr").find("td").eq(3).html())
        let a = $(this).closest("tr").find("td").eq(2).html()
        let b = $(this).closest("tr").find("td").eq(4).html()
        id = $(this).closest("tr").find("td").eq(0).html()
        console.log(b, id)
        if (a === "男") {
            $("#boy")[0].checked = true
        } else {
            $("#girl")[0].checked = true
        }
    })
    $("#gai").click(function() {
        $("#popup").fadeOut()
        $("#mask").fadeOut()
        $.ajax({
            url: `${url}/gaiData`,
            data: {
                id: id,
                name: $("#newName").val(),
                age: $("#newAge").val(),
                city: $("#province").val() + $("#city").val() + $("#area").val(),
                sex: $("#boy")[0].checked ? 0 : 1
            },
            success(data) {
                if (data === "成功") {
                    history.go(0)
                }
            }
        })

    })
    citys.forEach((item) => {
        let cloneCity1 = $(`<option>${item.provinceName}</option>`)
        $("#province").append(cloneCity1)

    })
    citys[0].mallCityList.forEach(item => {
        let cloneCity2 = $(`<option>${item.cityName}</option>`)
        $("#city").append(cloneCity2)
    })
    citys[0].mallCityList[0].mallAreaList.forEach(item => {
        cityList = citys[0].mallCityList
        let cloneCity3 = $(`<option>${item.areaName}</option>`)
        $("#area").append(cloneCity3)
    })
    $("#province").change(function() {
        $("#city").empty()
        $("#area").empty()
        cityList = citys[this.selectedIndex].mallCityList
        cityList.forEach(item => {
            let cloneCity2 = $(`<option>${item.cityName}</option>`)
            $("#city").append(cloneCity2)
        })
        cityList[0].mallAreaList.forEach(item => {
            let cloneCity3 = $(`<option>${item.areaName}</option>`)
            $("#area").append(cloneCity3)
        })

    })
    $("#city").change(function() {
        $("#area").empty()
        console.log(cityList)
        areaList = cityList[this.selectedIndex].mallAreaList
        areaList.forEach(item => {
            let cloneCity3 = $(`<option>${item.areaName}</option>`)
            $("#area").append(cloneCity3)
        })
    })
</script>

</html>